<template>
  <div class="product-compare-chart">
    <div :id="chartId" style="width: 100%; height: 170px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ProductCompareChart',
  props: {
    chartId: {
      type: String,
      default: 'productCompareChart'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      // 添加DOM元素存在性检查
      const chartDom = document.getElementById(this.chartId)
      if (!chartDom) {
        console.warn(`图表容器不存在: ${this.chartId}`)
        return
      }
      
      try {
        this.chart = echarts.init(chartDom)
        
        // 默认空配置
        const option = {
          title: {
            text: '',
            textStyle: { fontSize: 12, color: '#fff' }
          },
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { data: ['对比成功', '对比失败'], top: '5%', right: '3%', textStyle: { fontSize: 10, color: '#fff' }, icon: 'square' },
          xAxis: { 
            type: 'category', 
            data: [], 
            axisLabel: { fontSize: 10, rotate: 0, color: '#fff' },
            axisLine: { lineStyle: { color: '#fff' } },
            axisTick: { lineStyle: { color: '#fff' } }
          },
          yAxis: { 
            type: 'value', 
            name: '数量', 
            nameTextStyle: { fontSize: 10, color: '#fff' }, 
            axisLabel: { fontSize: 10, color: '#fff' },
            axisLine: { lineStyle: { color: '#fff' } },
            axisTick: { lineStyle: { color: '#fff' } },
            splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } }
          },
          series: [
            {
              name: '对比成功',
              type: 'bar',
              data: [],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#1EE7E7' },
                  { offset: 1, color: 'rgba(30,231,231,0.35)' }
                ])
              },
              emphasis: { 
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#1EE7E7' },
                    { offset: 1, color: 'rgba(30,231,231,0.55)' }
                  ])
                }
              },
              label: {
        show: true,
        position: 'top',
        fontSize: 10,
        color: '#fff'
      },
            },
            {
              name: '对比失败',
              type: 'bar',
              avoidLabelOverlap: false,
              data: [],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#1890FF' },
                  { offset: 1, color: 'rgba(24,144,255,0.35)' }
                ])
              },
              emphasis: { 
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#1890FF' },
                    { offset: 1, color: 'rgba(24,144,255,0.55)' }
                  ])
                }
              },
              label: {
        show: true,
        position: 'top',
        fontSize: 10,
        color: '#fff'
      },
            }
          ],
          grid: { left: '3%', right: '4%', bottom: '15%', top: '25%', containLabel: true }
        }
        
        this.chart.setOption(option)
      } catch (error) {
        console.error('图表初始化失败:', error)
      }
    },
    updateChart(data) {
      if (!this.chart || !data) return
      
      // 从数据中提取月份和对应的数量
      const months = []
      const successCounts = []
      const errorCounts = []
      
      // 处理成功对比数据
      if (data.successChart && data.successChart.length > 0) {
        data.successChart.forEach(item => {
          months.push(item.MONTH)
          successCounts.push(item.count)
        })
      }
      
      // 处理失败对比数据
      if (data.errorChart && data.errorChart.length > 0) {
        data.errorChart.forEach((item, index) => {
          if (!months.includes(item.MONTH)) {
            months.push(item.MONTH)
          }
          errorCounts[index] = item.count
        })
      }
      
      // 排序月份
      months.sort()
      
      this.chart.setOption({
        xAxis: { data: months },
        series: [
          { name: '对比成功', data: successCounts },
          { name: '对比失败', data: errorCounts }
        ]
      })
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>